<template>
  <div id="publishTable">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <!-- 中间内容-->
    <div class="content">
      <b-row>
        <!-- 左侧内容 -->
        <b-col cols="8">
          <div class="left-aside">
            <!-- 已填写收集表列表 -->
            <div class="title">
              <span>已发布收集表:</span>
            </div>
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  placement="top"
                  v-for="(item,index) in publishTableList"
                  :key="index"
                >
                  <el-card>
                    <h4 @click="skipTableDetails(item.collectionId)">{{item.title}}</h4>
                    <p v-html="item.info"></p>
                    <p>提交于{{item.createTime}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
            <!-- 分页区域 start-->
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="skipPage"
              :total="total"
              :page-size="pageSize"
              :current-page="pageNum"
            ></el-pagination>
            <!-- 分页区域 end-->
            <!-- 已填写收集表列表end -->
          </div>
        </b-col>
        <!-- 左侧内容end -->
        <!-- 右侧内容 -->
        <b-col cols="4">
          <div class="right-aside">
            <component :is="notice"></component>
          </div>
        </b-col>
        <!-- 右侧内容end -->
      </b-row>
    </div>
    <!-- 中间内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import TeacherHeader from "../../components/TeacherHeader.vue";
import TeacherIndex from "../../components/TeacherIndex";
import Footer from "../../components/Footer.vue";
export default {
  name: "publishTable",
  data() {
    return {
      // 定义组件
      header: "TeacherHeader",
      notice: "TeacherIndex",
      footer: "Footer",
      // 分页
      publishTableList: [],
      pageNum: 1,
      total: 0,
      pages: 0,
      pageSize: 6,
      title: ""
    };
  },
  created() {
    this.selectPublishedList();
  },
  methods: {
    // 根据页码跳转
    skipPage: function(pageNum) {
      this.$get(
        this.$urlPath.collection +
          "/collection/teaSelfRelease/" +
          pageNum +
          "/" +
          this.pageSize +
          "?title=" +
          this.title
      )
        .then(resp => {
          if (resp.code == 200) {
            this.publishTableList = resp.data.list;
            this.total = resp.data.total;
            this.pageSize = resp.data.pageSize;
          }
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查看收集表列表
    selectPublishedList() {
      this.$get(
        this.$urlPath.collection +
          "/collection/teaSelfRelease/" +
          this.pageNum +
          "/" +
          this.pageSize +
          "?title=" +
          this.title
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data.list == null) {
              this.publishTableList = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.publishTableList = resp.data.list;
              this.total = resp.data.total;
              this.pageSize = resp.data.pageSize;
            }
          }
          console.log(resp);
          console.log("--------------------------");
          console.log(resp.data.pageSize);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查看收集表列表end
    // 跳转收藏表详情页
    skipTableDetails(collectionId) {
      this.$router.push({
        path: "/teacherDetails" + "?collectionId=" + collectionId
      });
    }
  },
  components: {
    TeacherHeader,
    TeacherIndex,
    Footer
  }
};
</script>
<style lang="less">
@import "../../assets/less/tableList.less";
</style>